<template>
  <div class="right-top">
    <div class="text">工程项目</div>
    <div class="left-top">
      <img src="../../assets/right/first/circle.png" alt class="img1" />
      <div class="number">{{number}}</div>
      <div class="text1">在建工程项目数(个)</div>
      <img src="../../assets/right/first/circle.png" alt class="img2" />
      <div class="area">{{area}}</div>
      <div class="text2">总建筑面积(km2)</div>
      <div class="line"></div>
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
      <div>
        <img src="../../assets/right/first/houses.png" alt class="houses" />
        <div class="houser-number">
          {{houseNumber}}
          <span>个</span>
        </div>
        <div class="houser">房建项目数</div>
      </div>
      <div>
        <img src="../../assets/right/first/government.png" alt class="governments" />
        <div class="government-number">
          {{governmentNumber}}
          <span>个</span>
        </div>
        <div class="government">市政项目数</div>
      </div>
      <div class="right-center">
        <span class="toubiao">项目招投标</span>
        <div class="zongwenzi">
          <div class="xiangmushu">
            {{xiangmushu1}}
            <span class="toubiaoicon"></span>
            <div class="youbiaotext">项目数</div>
          </div>
          <div class="youbiaoshu">
            {{toubiaoshu}}
            <span class="toubiaoicon1"></span>
            <div class="youbiaotext">投标数</div>
          </div>
          <div class="kongzhi">
            {{kongzhijiatotal}}
            <span class="toubiaoicon2"></span>
            <div class="youbiaotext">控制价总额</div>
          </div>
          <div class="zhongbiao">
            {{zhongbiaojiatotal}}
            <span class="toubiaoicon3"></span>
            <div class="youbiaotext">中标价总额</div>
          </div>
        </div>
        <img src="../../assets/right/first/toubiao.png" alt class="toubiao-img" />
        <div class="title_zps_wrap">
          <yearOrYearSwitch class="year_zps_ul" :year="socialHouseIntervalCount" />
        </div>
        <span class="tushen">项目图审</span>
        <div class="tushenshu">
          <div class="tushetotal">
            图审项目数
            <span class="ge">(个)</span>
            <span class="tushen-number">{{tushenNumber}}</span>
          </div>
        </div>
        <div class="tushenshu1">
          <div class="tushetotal">
            图审面积
            <span>(km²)</span>
            <span class="tushen-number">{{tushenArea}}</span>
          </div>
        </div>
        <div class="tushenshu2">
          <div class="tushetotal">
            图审投资额
            <span>(万元)</span>
            <span class="tushen-number">{{tushenTou}}</span>
          </div>
        </div>
        <RightTopChart :series="series" :yeardata="OrYear.yeardata" />
      </div>
    </div>
  </div>
</template>

<script>
import yearOrYearSwitch from "../../components/homePage/YearOrYearSwitch";
import RightTopChart from "../../components/echart/right/RightTopCharts";
export default {
  components: {
    yearOrYearSwitch,
    RightTopChart
  },
  props: {},
  data() {
    return {
      //工程项目echarts轮播次数
      socialHouseIntervalCount: 0,
      number: "",
      area: "",
      houseNumber: "",
      governmentNumber: "",
      tushenNumber: "",
      tushenArea: "",
      tushenTou: "",
      xiangmushu1: "",
      toubiaoshu: "",
      kongzhijiatotal: "",
      zhongbiaojiatotal: "",
      series: [
        {
          type: "line",
          smooth: true,
          data: [62, 65, 60, 65, 59, 57],
          lineStyle: {
            color: "rgba(217,79,100,1)"
          }
        },
        {
          type: "line",
          smooth: true,
          data: [20, 50, 80, 90, 60, 70],
          lineStyle: {
            color: "rgba(252,179,58,1)"
          }
        },
        {
          type: "line",
          step: "start",
          data: [30, 50, 30, 50, 30, 50],
          areaStyle: {
            color: "rgba(43,183,255,0.5)"
          },
          lineStyle: {
            color: "rgba(96,191,185,1)"
          }
        },
        {
          type: "line",
          step: "start",
          data: [20, 40, 30, 40, 30, 40],
          lineStyle: {
            color: "rgba(43,183,255,1)"
          },
          areaStyle: {
            color: "rgba(43,183,255,0.5)"
          }
        }
      ],
      series2019: [
        {
          type: "line",
          smooth: true,
          data: [62, 65, 60, 65, 59, 57],
          lineStyle: {
            color: "rgba(217,79,100,1)"
          }
        },
        {
          type: "line",
          smooth: true,
          data: [20, 50, 80, 90, 60, 70],
          lineStyle: {
            color: "rgba(252,179,58,1)"
          }
        },
        {
          type: "line",
          step: "start",
          data: [30, 50, 30, 50, 30, 50],
          areaStyle: {
            color: "rgba(43,183,255,0.5)"
          },
          lineStyle: {
            color: "rgba(96,191,185,1)"
          }
        },
        {
          type: "line",
          step: "start",
          data: [20, 40, 30, 40, 30, 40],
          lineStyle: {
            color: "rgba(43,183,255,1)"
          },
          areaStyle: {
            color: "rgba(43,183,255,0.5)"
          }
        }
      ],
      series2018: [
        {
          type: "line",
          smooth: true,
          data: [50, 60, 55, 40, 65, 57],
          lineStyle: {
            color: "rgba(217,79,100,1)"
          }
        },
        {
          type: "line",
          smooth: true,
          data: [30, 55, 70, 80, 60, 90],
          lineStyle: {
            color: "rgba(252,179,58,1)"
          }
        },
        {
          type: "line",
          step: "start",
          data: [40, 60, 40, 60, 40, 60],
          areaStyle: {
            color: "rgba(43,183,255,0.5)"
          },
          lineStyle: {
            color: "rgba(96,191,185,1)"
          }
        },
        {
          type: "line",
          step: "start",
          data: [30, 50, 40, 50, 40, 50],
          lineStyle: {
            color: "rgba(43,183,255,1)"
          },
          areaStyle: {
            color: "rgba(43,183,255,0.5)"
          }
        }
      ],
      series2017: [
        {
          type: "line",
          smooth: true,
          data: [52, 55, 50, 55, 49, 47],
          lineStyle: {
            color: "rgba(217,79,100,1)"
          }
        },
        {
          type: "line",
          smooth: true,
          data: [30, 60, 90, 80, 60, 70],
          lineStyle: {
            color: "rgba(252,179,58,1)"
          }
        },
        {
          type: "line",
          step: "start",
          data: [30, 50, 30, 50, 30, 50],
          areaStyle: {
            color: "rgba(43,183,255,0.5)"
          },
          lineStyle: {
            color: "rgba(96,191,185,1)"
          }
        },
        {
          type: "line",
          step: "start",
          data: [20, 40, 30, 40, 30, 40],
          lineStyle: {
            color: "rgba(43,183,255,1)"
          },
          areaStyle: {
            color: "rgba(43,183,255,0.5)"
          }
        }
      ],
      series2016: [
        {
          type: "line",
          smooth: true,
          data: [52, 55, 50, 55, 49, 47],
          lineStyle: {
            color: "rgba(217,79,100,1)"
          }
        },
        {
          type: "line",
          smooth: true,
          data: [30, 40, 60, 80, 50, 60],
          lineStyle: {
            color: "rgba(252,179,58,1)"
          }
        },
        {
          type: "line",
          step: "start",
          data: [20, 40, 60, 70, 50, 30],
          areaStyle: {
            color: "rgba(43,183,255,0.5)"
          },
          lineStyle: {
            color: "rgba(96,191,185,1)"
          }
        },
        {
          type: "line",
          step: "start",
          data: [50, 60, 50, 40, 50, 40],
          lineStyle: {
            color: "rgba(43,183,255,1)"
          },
          areaStyle: {
            color: "rgba(43,183,255,0.5)"
          }
        }
      ],
      OrYear: {
        yeardata: [
          "2019/2",
          "2019/4",
          "2019/6",
          "2019/8",
          "2019/10",
          "2019/12"
        ],
        year2019: [
          "2019/2",
          "2019/4",
          "2019/6",
          "2019/8",
          "2019/10",
          "2019/12"
        ],
        year2018: [
          "2018/2",
          "2018/4",
          "2018/6",
          "2018/8",
          "2018/10",
          "2018/12"
        ],
        year2017: [
          "2017/2",
          "2017/4",
          "2017/6",
          "2017/8",
          "2017/10",
          "2017/12"
        ],
        year2016: ["2016/2", "2016/4", "2016/6", "2016/8", "2016/10", "2016/12"]
      }
    };
  },
  watch: {
    option: {
      handler: function() {
        this.getEcharts();
      },
      deep: true
    }
  },
  computed: {},
  methods: {
    // 图审项目数
    getTuShen() {
      this.http
        .post("", {
          path: "ov",
          groupid: 4
        })
        .then(res => {
          // console.log(res.data);
          this.tushenNumber = res.data.jzy_xmts_tsxms;
          this.tushenArea = res.data.jzy_xmts_tsmj;
          this.tushenTou = res.data.jzy_xmts_tstze.toFixed(0);
        });
    },
    // 项目招投标
    getTouBiao() {
      this.http
        .get(
          "http://10.10.208.6:2020/home/serv?path=st&groupid=7&year=1&ismonth=0"
        )
        .then(res => {
          // console.log(res.data);
          this.xiangmushu1 = res.data.jzy_xmztb_xms;
          this.toubiaoshu = res.data.jzy_xmztb_bds;
          this.kongzhijiatotal = res.data.jzy_xmztb_kzjze;
          this.zhongbiaojiatotal = res.data.jzy_xmztb_zbjze;
        });
    },
    // 工程项目
    getXiangMu() {
      let vm = this;
      let param = { path: "ov", groupid: 3 };
      vm.http({
        url: "http://10.10.208.6:2020/home/serv",
        method: "post",
        params: param
      }).then(res => {
        // console.log(res);
        this.number = res.data.jzy_zjgcxms;
        this.area = (res.data.jzy_zjzmj / 1000000).toFixed(0);
        this.houseNumber = res.data.jzy_fjxms;
        this.governmentNumber = res.data.jzy_szxms;
      });
    },
    //获取echarts数据
    getEcharts() {
      // 开启定时，进行轮播
      let _this = this;
      setInterval(() => {
        let count = _this.socialHouseIntervalCount;
        count++;
        let mod = count % 4;
        switch (mod) {
          case 0: {
            _this.series = _this.series2019;
            _this.OrYear.yeardata = _this.OrYear.year2019;
            break;
          }
          case 1: {
            _this.series = _this.series2018;
            _this.OrYear.yeardata = _this.OrYear.year2018;
            break;
          }
          case 2: {
            _this.series = _this.series2017;
            _this.OrYear.yeardata = _this.OrYear.year2017;
            break;
          }
          case 3: {
            _this.series = _this.series2016;
            _this.OrYear.yeardata = _this.OrYear.year2016;
            break;
          }
        }
        _this.socialHouseIntervalCount = count;
      }, 5 * 1000);
    }
  },
  created() {},
  mounted() {
    // 工程项目
    this.getXiangMu();
    // 项目招投标
    this.getTouBiao();
    // 图审项目数
    this.getTuShen();
    this.getEcharts();
    // path：st，groupid：7,year: 2019 ismonth: 0
  }
};
</script>
<style lang="scss" scoped>
@import "../../assets/scss/building/rightTop.scss";
</style>